<div class="musor" >
    <h1 class="big-title cyane rnd7">Műsornaptár</h1>
    <div id='mh-event-calendar'></div>
</div>
<script src="<?php echo base_url(); ?>frontend_style/script/calendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>frontend_style/script/calendar/gcal.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>frontend_style/script/jquery.xcolor.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>frontend_style/script/jquery.dropshadow.js"></script>
<!-- GOOGLE SETTING <script src="<?php echo base_url(); ?>frontend_style/script/calendar/declaration.js" type="text/javascript"></script>-->
<script>
    $(document).ready(function() {

        // CALENDAR 3D effect

        $.fn.extruder = function() {
            var depth = 10;
            var extrudeIt = $(this);
            var bgColor = extrudeIt.css('background-color');
            var bgColorDarker = $.xcolor.darken(bgColor);

            for(var i = 1; i <= depth; i++) {
                extrudeIt.dropShadow({
                    left : i,
                    top : -i,
                    blur : 0,
                    opacity : 1,
                    color : bgColorDarker
                });
            }
        };
        
        // CALENDAR PLUGIN - DECLARATION
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#mh-event-calendar').fullCalendar({

            header: {
                left: 'prev,next today',
                center: 'title',
                // right: 'month,agendaWeek,agendaDay',
                right: '',
                theme: false

            },
            columnFormat: {
                month: 'dddd',    // Mon
                week: 'dddd', // Mon 9/7
                day: 'dddd'  // Monday 9/7
            },
            editable: false,
            minTime: '11:00',
            firstDay: 1,
            axisFormat: 'H:mm' ,

            eventSources: [

                {
                    url: '<?php echo site_url('musor/ajax_get_musor'); ?>',
                    className: '3dBox' ,
                    type: 'POST'
                }

            ], timeFormat: 'H:mm',
            
            eventAfterRender: function(event, element, view){
                console.log (element);


                    $(element).extruder();

            
            }

        });

		


    });
</script>